<template>
  <div class="hb-title">
    <div class="page-title">
      <span @click="goBack" ref="left" class="iconfont goBack">&#xe606;</span>
      <h3>{{title}}</h3>
      <span @click="rightlink" ref="right"  class="right">{{righttext}}</span>
      <span @click="rightlink" class="right iconfont" :class="classinfo"></span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'MyHead',
    data(){
      return{

      }
    },
  /**
   * link:头部左边跳转路由链接,传空字符串则不显示图标
   * title:头部title
   * righttext:头部右边显示的文字,不需要则不传
   * riglink:右边跳转的路由链接,不需要则不传
   */
  props:["link",'title','righttext','riglink','classinfo'],  //获取父组件传的值
    mounted(){

      if(this.link == ''){
        this.$refs.left.style.display = 'none';
      }
      if(this.righttext == ''){
        this.$refs.right.style.display = 'none';
      }

    },
    methods:{
      goBack:function(){
        if(this.link == '-1'){
          this.$router.go(-1)
          return false
        }
        this.$router.push(this.link);
      },
      rightlink:function(){
        this.$router.push(this.riglink);
      }
    }
  }
</script>

<style scoped>
  .page-title {
    position: relative;
    height: 120px;
    width: 100%;
    color:#F5F5F5;
    line-height: 120px;
    font-size: 34px;
    font-weight: 400;
    background: linear-gradient(0deg, #222441 0%, #07070D 100%);

  }
  .page-title h3 {font-weight: 400;}

  .page-title .goBack {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 100%;
    font-size: 0.5rem;
    color: #f5f5f5;
    font-weight: 700;
  }
  .page-title .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    height: 100%;
    font-size: 24px;
  }
  .page-title .right.iconfont {
    font-size: 0.7rem;
  }
  .hb-title {width: 100%;}
</style>
